<template>
    <div class="content">
        <el-dialog :visible.sync="addImportData.dialogLotImport" title="批量导入赠送对象" size="tiny" 
        :before-close="handleClose">
          <el-form ref="form" :model="form" label-width="130px" v-loading="loading">
            <el-form-item label="请选择导入的对象">
              <el-row type="flex" class="row-bg" justify="space-between" :gutter="20">
                <el-col :span="20">
                  <span class="urlText" v-cloak>
                    <el-row type="flex" class="row-bg" justify="space-between">
                      <el-col :span="6">
                        <el-button type="text" class="text">{{form.text}}</el-button>
                      </el-col>
                      <span>
                          <el-button v-if="delStart" @click="delFileUrl" type="text">
                          删除<i class="el-icon-close el-icon--right"></i>
                        </el-button>
                      </span>
                    </el-row>
                    <i v-if="expand" :style="`width:${progress}%`" class="expand"></i>
                  </span>
                </el-col>
                <span>
                     <file-upload ref="upload" @onSuccess="successFn" :isAuto="true" @getFileName="getFileName"  @onProgress="progressFn" :up-file-type="fileOptions.upFileType">
                     <el-button type="text" class="btn-success font-style font-style-color" slot="trigger" size="small">选择文件</el-button>
                  </file-upload>
                </span>
              </el-row>
              <div class="el-upload-text font-style">只能上传xlsx/xls文件</div>
              <span class="font-style-color">
                <a href="http://testdoc-1254059237.cossh.myqcloud.com/%E6%89%B9%E9%87%8F%E5%AF%BC%E5%85%A5%E8%B5%A0%E9%80%81%E5%AF%B9%E8%B1%A1%E6%A8%A1%E6%9D%BF.xlsx">下载导入模板</a>
              </span>
            </el-form-item>
            <el-row type="flex" class="row-bg" justify="center">
              <el-col :span="5">
                <el-button @click="close">关闭</el-button>
              </el-col>
              <el-col :span="5">
                <el-button type="primary" @click="btnUp">上传</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-dialog>
    </div>
</template>
<script>
import fileUpload from 'components/Upload/fileUpload';
import {addUserImport, judgeByExcel} from 'api/creditShop';
export default {
    props: {
        addImportData: {
            type: Object,
            required: true
        }
    },
 
    data() {
        return {
      // 设置上传类型
            fileOptions: {
                upFileType: 'excel'
            },

      // 初始加载进度
            progress: 0,

      // 展示上传文件名称
            form: {
                text: ''
            },

      // 判断是否选择文件
            delStart: false,

      // 是否进度条滚动
            expand: false,

      // 上传loading
            loading: false,
            btnUpObj: null
        };
    },
    components: {
        fileUpload
    },
    methods: {
    //
        progressFn(p) {
            this.progress = p.percent;
            this.expand = true;
        },
        successFn(obj) {
            this.btnUpObj=obj;
        },
        getFileName(obj) {
            this.form.text = obj.name;
            this.delStart = true;
        },
        handleClose() {
            this.delData();
        },
        close() {
            this.delData();
        },
        delFileUrl() {
            this.form.text = '';
            this.delStart = false;
            this.expand = false;
            this.loading = false;
        },
        delData() {
            this.addImportData.dialogLotImport= false;
            this.form.text = '';
            this.delStart = false;
            this.expand = false;
            this.loading = false;
        },
    //   点上传按钮
        btnUp(val) {
            // console.log(this.btnUpObj, '00000')
      // 触发上传事件
            if (!this.form.text) {
                this.$message({
                    message: '请先上传文件',
                    type: 'warning'
                });
            } else {
                this.loading = true;
                let filePath = this.btnUpObj.imgUrl;
                addUserImport(filePath).then(res => {
                    this.loading = false;
                    // this.addImportData.dialogLotImport= false;
                    let list=this.addImportData.AnnounceList;
                    let excelList=res.data.content;// xcel导入接口返回list”
                    this.judgeByExcel(list, excelList);// 判断是否重复
                }).catch(res => {
                    this.loading = false;
                });
            }
        },
          // 判断导入数据是否重复
        judgeByExcel(list, excelList) {
            judgeByExcel(list, excelList).then(res => {
                this.addImportData.AnnounceList=res.data.content;// 添加的返回列表 传给父组件显示出来
                this.$emit('updatExcelData'); // 更新父组件的列表
                this.$message.success('导入赠送对象成功！')
                this.delData();
            }).catch((res) => {
                console.log('失败了')
                this.loading = false;
            })
        }
    }
};
</script>
<style lang="scss" scoped>
code {
 padding: 0;
  margin-bottom: 0;
  margin-top: 10px;
  background: transparent;
  a{
      color:#37a1fb;
  }
}

.urlText {
  position: relative;
  height: 36px;
  width: 100%;
  display: block;
  border: 1px solid rgb(217, 200, 191);
  padding: 0 10px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  .text {
    width: 155px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .expand {
    position: absolute;
    width: 100%;
    height: 1px;
    margin: 2px 0;
    background: #37a1fb;
    bottom: -3px;
    left: 0;
    transition: all 5s;
    // box-shadow: 0px 0px 10px 1px rgba(0, 198, 255, 0.7);
    // -moz-animation: fullexpand 10s ease-out;
    // -webkit-animation: fullexpand 10s ease-out;
  }
}
.del {
  padding-left: 5px;
  font-style: normal;
  cursor: pointer;
  color: rgb(32, 160, 255);
  i {
    padding-left: 5px;
    font-size: 12px;
  }
}
</style>
